<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
		  margin: 0;
		  padding: 0;
		}
		body{
			width: 100%;
			height: 100%;
			text-align: center;
		}
		.scroll{
		  margin:100px auto;
		  width: 500px;
		  height: 5px;
		  background: #ccc;
		  position: relative;
		}
		.bar{
		  width: 20px;
		  height: 20px;
		  background: #369;
		  position: absolute;
		  top: -7px;
		  left: 0;
		  cursor: pointer;
		  border-radius: 50% 50%;
		}
		.mask{
		  position: absolute;
		  left: 0;
		  top: 0;
		  background: #369;
		  width: 0;
		  height: 5px;
		}
		span{
			font-size: large;
			display: none;
		}
		img{
			margin-top: 100px;
			width: 200px;
			height: 200px;
			overflow: hidden;
			object-fit: cover;
			border-radius: 50% 50%;
			/* transform: rotate(30deg); */
		}
		button{
			width: 80px;
			height: 40px;
		}
	</style>  

	<body>
		<div>
			<img  src="https://c-ssl.duitang.com/uploads/item/201506/24/20150624231809_CQvds.thumb.1000_0.jpeg" />
			  <div class="scroll" id="scroll">
				<div class="bar" id="bar">
			 
				</div>
				<div class="mask" id="mask"></div>
			  </div>
			  <span></span>
		</div>
	</body>
	
	<script>  
	    var scroll = document.getElementById('scroll');
	    var bar = document.getElementById('bar');
	    var mask = document.getElementById('mask');
	    var ptxt = document.getElementsByTagName('span')[0];
	    var img = document.getElementsByTagName('img')[0];
	    var barleft = 0;
		var angle = Math.random()*360;
	    bar.onmousedown = function(event){
	      var event = event || window.event;
	      var leftVal = event.clientX - this.offsetLeft;
	      var that = this;
	       // 拖动一定写到 down 里面才可以
	      document.onmousemove = function(event){
	        var event = event || window.event;
	        barleft = event.clientX - leftVal;     
	        if(barleft < 0)
	          barleft = 0;
	        else if(barleft > scroll.offsetWidth - bar.offsetWidth)
	          barleft = scroll.offsetWidth - bar.offsetWidth;
	        mask.style.width = barleft +'px' ;
	        that.style.left = barleft + "px";
			newangle = angle;
			newangle = parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 360) + newangle;
			newangle %= 360;
			img.style.transform = 'rotate('+newangle+'deg)';
			console.log(newangle);
	        //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
	        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
	      }
		  document.onmouseup = function(){
		  		  document.onmousemove = null; //弹起鼠标不做任何操作
		  		  let nowangle = img.style.transform;
		  		  console.log(nowangle);
		  		  nowangle = nowangle.substr(7,6);
		  		  //判定成功的角度误差，可以根据自己的需求来修改
		  		  if(nowangle > 350 || nowangle < 10){
		  			alert("验证通过");
		  		  }else{
		  			alert("验证失败!!!!!!!!!!!!!!!!");
		  		  }
		  			window.location.reload();
		  		}
	    }
	    
		function check(){
			let nowangle = img.style.transform;
			console.log(nowangle);
			nowangle = nowangle.substr(7,6);
			if(nowangle > 350 || nowangle < 10){
				alert("验证通过");
			}else{
				alert("验证失败");
			}
		}
		//随机图片初始旋转角度
		while(angle < 20 || angle > 350){
			angle = Math.random()*360;
		}
		img.style.transform = 'rotate('+angle+'deg)';
	  </script>

</html>
